<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function f1(){
            let s = setInterval(function(){
                let image = document.getElementById("image");
                image.style.left = parseFloat(image.style.left) + 50 + "px";
            },100);
            setTimeout(function(){
                clearInterval(s);
            },3700);
        }
        function f2(){
            let s = setInterval(function(){
                let d2 = document.getElementById("d2");
                if(parseFloat(d2.style.width) < 100){
                    d2.style.width = parseFloat(d2.style.width) + 2 +"%";
                }
            },100);
        }
        window.onload = function(){
            setInterval(function(){
                let date = new Date();
                document.getElementById("s1").innerHTML = date.getFullYear()+"年"+fn(date.getMonth()+1)+"月"+fn(date.getDate())+"日"+fn(date.getHours())+":"+fn(date.getMinutes())+":"+fn(date.getSeconds());
            },100);
        }
        function fn(s){
            s = "0" + s;
            return s.substring(s.length-2);
        }
    </script>
</head>
<body>
<img id="image" src="../images/heihei.gif" alt="图片加载失败" style="position:relative;left: 0px;" onclick="f1()">
<hr>
<div id="d1" style="width: 1000px;height: 50px;border: 1px solid black">
    <div id="d2" style="height: 100%; width: 2%;background-color: red;" onmousemove="f2()"></div>
</div>
<hr>
<!--
    在浏览器中打印当前时间,要求时间格式为yyyy年MM月dd日 HH:mm:ss
    且时间是一直走动的
-->
<span id="s1"></span>
</body>
</html>